@function rem($px) {
  @return $px / 100 + rem;
}
$main-color: #7f2974;
$c99: #999999;
$c66: #666666;
$cff: #ffffff;
.fr {
  float: right;
}
.fl {
  float: left;
}
html{
  font-size: 83px;
}
body {
  padding-top: rem(150);
}
img {
  max-width: 100%;
}
.top-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: $cff;
  .top-tips-nav {
    max-width: rem(1366);
    padding: 0 rem(160);
    line-height: rem(38);
    width: rem(1366);
    box-sizing: border-box;
    margin: 0 auto;
    .hello-text {
      color: $main-color;
      font-size: rem(14);
      font-weight: 500;
      letter-spacing: rem(1.2);
    }
    .tip-nav {
      background-color: #fff;
      padding: 0;
      .layui-nav-bar {
        background-color: transparent;
      }
      .layui-nav-item {
        line-height: inherit;
        a {
          color: $c99;
          font-size: inherit;
          font-size: inherit;
          padding: 0;
          margin-right: rem(33);
        }
        &.end-item a {
          margin-right: 0;
        }
      }
    }
  }
  .top-line {
    height: rem(2);
    background-color: $main-color;
    margin: 0;
    padding: 0;
  }
  .top-icon-box {
    width: rem(1366);
    font-size: 0;
    max-width: rem(1366);
    margin: 0 auto;
    padding: rem(10) 0 0 rem(169);
    box-sizing: border-box;
    .box-style {
      display: inline-block;
      color: $c66;
      font-size: 0;
      ul {
        display: inline-block;
        vertical-align: middle;
        li {
          font-family: PingFangSC-Regular;
          font-size: rem(14);
        }
      }
    }
    .tel-info-box {
      img {
        display: inline-block;
        width: rem(45);
        height: rem(32);
        margin-right: rem(10);
        vertical-align: middle;
      }
    }
  }
  .logo {
    width: rem(50);
    height: rem(50);
    display: inline-block;
    margin-left: rem(238);
    margin-right: rem(304);
  }
  .local-info-box {
    img {
      width: rem(34);
      height: rem(40);
      margin-right: rem(10);
    }
  }
  .nav-box {
    max-width: rem(1366);
    margin: 0 auto;
    color: #303030;
    background-color: $cff;
    padding: 0 rem(170);
    .layui-nav-bar {
      background-color: transparent;
    }
    .layui-nav-item {
      line-height: rem(50);
      &.active a {
        color: $main-color;
      }
      a {
        color: initial;
        font-size: rem(18);
        padding: 0;
        margin-right: rem(93);
      }
      &.end-item a {
        margin-right: 0;
      }
    }
  }
}
.server-banner-box{
  height: rem(200);
  position: relative;
  color: $cff;
  text-align: center;
  background: url('../images/server-banner.png') center no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  span{
    font-size: rem(20)
  }
  p{
    font-size: rem(36)
  }
}
.server-container{
  background-color: #f6f7f8;
  .server-padding-box{
    max-width: rem(1366);
    margin: 0 auto;
    padding: rem(80) rem(160);
    font-size: 0;
    box-sizing: border-box;
  }
  .server-nav{
      display: inline-block;
      margin-right: rem(60);
      .nav-line{
          width: rem(100);
          height:rem(10);
          background-color: $main-color;
          margin-bottom: rem(30);
      }
      ul li{
        font-size: rem(24);
        color: #808080;
        margin-bottom: rem(30);
        cursor: pointer;
        &:last-child{
          margin-bottom: 0;
        }
        &.nav-title{
          color: #333;
          cursor: default;
        }
        &.active{
          color:#BB90B6;
        }
      }
  }
  .server-content{
    font-size: 0;
    background: $cff;
    display: inline-block;
    width: rem(840);
    vertical-align: top;
    padding: 0 0  0  rem(22);
    box-sizing: border-box;
    .server-text-box{
      height: rem(656);
      overflow: hidden;
      text-overflow: ellipsis;
      padding-top:rem(22);
      vertical-align: top;
      margin-right: rem(23);
      width: rem(353);
      display: inline-block;
      padding-bottom: rem(22);
      box-sizing: border-box;
    }
    p.server-detail{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 20;
      overflow: hidden;
      height: rem(550);
      text-overflow: ellipsis;
      margin-top: rem(15);
      color:#666666;
      line-height: rem(28);
      font-size: rem(15);
    }
    p.server-title{
      font-size: rem(26);
      color:#0C1210;
      span{
        display: block;
        margin-top: rem(15);
        width: rem(120);
        height: rem(4);
        background-color:#808080;
      }
    }
    .server-img{
      vertical-align: top;
      width: rem(440);
      display: inline-block;
      height: rem(656);
      background-size: cover;
      position: relative;
      background: url("../images/server-detail-01.jpg") 0 0 no-repeat;
      &.baomu{
        background: url('../images/server-detail-01.jpg') 0 0 no-repeat;
        background-size: cover;
      }
      &.hugong{
        background: url('https://0.rc.xiniu.com/g2/M00/0F/DF/CgAGe1xIPGiAYIkPAANxAoQHA-4090.png') 0 0 no-repeat;
        background-size: cover;
      }
      &.baojie{
        background: url('https://0.rc.xiniu.com/g2/M00/0F/DF/CgAGe1xIPGiAYIkPAANxAoQHA-4090.png') 0 0 no-repeat;
        background-size: cover;
      }
      &.yuesao{
        background: url('https://0.rc.xiniu.com/g2/M00/0F/DF/CgAGe1xIPGiAYIkPAANxAoQHA-4090.png') 0 0 no-repeat;
        background-size: cover;
      }
      &.cuirushi{
        background: url('https://0.rc.xiniu.com/g2/M00/0F/DF/CgAGe1xIPGiAYIkPAANxAoQHA-4090.png') 0 0 no-repeat;
        background-size: cover;
      }
      &.yuyinshi{
        background: url('../images/server-detail-01.jpg') 0 0 no-repeat;
        background-size: cover;
      }
      &.qwzl{
        background: url('../images/server-detail-01.jpg') 0 0 no-repeat;
        background-size: cover;
      }
      &.srdz{
        background: url('../images/server-detail-01.jpg') 0 0 no-repeat;
        background-size: cover;
      }
      &.swjz{
        background: url('../images/server-detail-01.jpg') 0 0 no-repeat;
        background-size: cover;
      }
      .icon-server{
        width: rem(78);
        height: rem(90);
        position: absolute;
        left: rem(-20);
        top:50%;
        transform: translateY(-50%);
      }
    }
  }
}
// footer
footer {
  padding-top: rem(60);
  text-align: center;
  padding-bottom: rem(60);
  .bottom-title {
    margin: 0 auto;
    display: block;
    width: rem(357);
    height: rem(198);
    object-fit: contain;
  }
  p {
    margin: rem(50) auto rem(10);
  }
  p,
  .bottom-nav span a {
    color: #aaa;
  }
  .layui-breadcrumb a:hover {
    color: $main-color !important;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1385px) {
  .top-box .nav-box .layui-nav-item a {
    margin-right: 0.88rem;
  }
  .server-container .server-nav{
    margin-right: rem(30);
  }
}
